<docs>
  ## 个人退休申请预约记录列表
  ## props
</docs>
<template>
  <div>
    <Mheader class="index" @back_btn="goBack()" title="个人退休申请预约记录"></Mheader>
    <div class="search">
        <ul class="item-wrap">
          <li class="item" v-for="(item, index) in List" :key="index">
            <div class="item-title-wrap">
              <p class="item-title-text" :class="[item.shzt == '1' ? '' : 'col-3']">申请状态：<span :class="[item.sqztmc == '正常' ? 'rightspan' : 'rightRed']">{{item.sqztmc}}</span></p>
              <p class="item-title-text margin-l" v-show="item.yyzt">
                预约状态：<span :class="[item.yyzt == '未预约' ? 'rightspan2' : 'rightspan']" >{{item.yyzt}}</span>
                <!-- <span :class="classObject" >{{item.shztmc}}</span> -->
              </p>
              <p class="text-btn" v-show="item.sfkyy != 0" @click="yy(item)">预约</p>
              <p class="text-btn-look" @click="look(item)">查看</p>
            </div>
            <div class="item-title-wrap">
              <p class="item-title-text" style="line-height: 1.3;">审核状态：<span :class="[item.shzt == '2' ?'rightRed':item.shzt== '1'?'rightspan':'rightspan2']">{{item.shztmc}}</span></p>
              <p class="text-btn" v-show="item.sfkqx == 1" @click="qx(item)">{{item.sqzt == '1'?'取消':'已取消'}}</p>
            </div>
          </li>
        </ul>
    </div>
    <!-- 上拉刷新 开始 -->
    <pagination-list @pullingDown="asyncFetch"
      :no-data="noData" class="search-result"
      :ajax-loading="ajaxLoading">
    </pagination-list>
    <!-- 上拉刷新 结束 -->
    <!-- 预约申请 开始 -->
    <message-card
      :visible.sync="save.visible"
      :title="save.title"
      :btn-text="save.btnText"
      :btn-type="save.btnType"
      @btnClick="msgBtn"
      @iconCloseClick="iconCloseClick"
      :type="save.type ? 'success' : 'fail'"
    >
      <co-date ref="fzrqDate" label="选择日期" flag="0" endDate="" max-length="14" placeholder="请选择"></co-date>
      <div class="form-group">
        <label class="input-label">选择时段</label>
        <select style="direction: rtl;" ref="_select">
          <option>上午</option>
          <option>下午</option>
        </select>
      </div>
      <p class="_tip">请选择工作日办理预约！</p>
    </message-card>
    <!-- 预约申请 结束 -->

  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";
import MessageCard from "@/ldry/group/messageCard/messageCard";
import CoDate from "@/base/datePicker/dateUi";
import PaginationList from "@/ldry/group/paginationList/paginationList";

export default {
  components: {
     Mheader, PaginationList, MessageCard, CoDate
  },
  name: "search",
  data() {
    return {
      isRightRed:false, //红
      isRightspan:false, //绿
      isRightspan2:false, //橙
      materialVisible: true, //弹框
      List: [],
      page:1,
      pageSize: 10,
      ajaxLoading: false,
      noData:false,
      save: {
        type: "1",
        btnText: "确定",
        btnType: "primary",
        title: "预约申请",
        visible: false
      },
      id:""//预约id保存
    };
  },
  methods: {
    asyncFetch(page) {
      this.GET_reverseList(page);
    },
    // 预约
    yy(id){
      if (id.sfcl != '') {
          this.$alert({
            type: 'warning',
            message: id.sfcl
          });
          return false;
        }
      if (id.ksrq == "" || id.jsrq == '') {
        this.save.visible = true;
        this.id = id.yyid
      }
    },
    // 查看
    look(id){
      this.$router.push({name:"txyyinfo",query:{yyid:id.yyid}})
    },
    // 取消申请
    qx(id){
      if (id.sqzt != '1') return
      this.$confirm('是否取消申请？', '', {
        cancleBtnText: '取消',
        confirmBtnText: '确认'
      }).then(() => {
        $.get('/dafwgl/txsq/sqQx',{params:{yyid:id.yyid}}).then((res)=>{
          const flag = parseInt(res.returnData.executeResult, 10);
          if (flag === 1) {
            this.$alert({
              type: 'success',
              message: '该申请取消成功!'
            });
            this.GET_reverseList()
          } else {
            this.$alert({
              type: 'warning',
              message: res.returnData.message
            });
          }
        }).finally();
      }).catch(() => {});
    },
    // 获取申请列表
    GET_reverseList(page = 1) {
      this.ajaxLoading = true;
      $.get("/dafwgl/txsq/txsqCx", {params:{ pageSize: this.pageSize, pageNum: page }} )
        .then(res => {
          const data = res.returnData;
          // 无查询结果
          if (+data.executeResult === 0) {
            this.noData = true;
            if (page === 1) {
              this.List = []
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.List = data.wdyy;
            } else {
              this.List = this.List.concat(data.wdyy);
            }
            if (res.rowsCount -res.startNum < this.pageSize ) {
              this.ajaxLoading = true;
              this.noData = true;
            }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
        });
    },
    inforCx(item) {
      const sqid = item;
      this.$router.push({ name: "infor", query: { sqid } });
    },
    // 确定点击处理
    msgBtn() {
      let fzrq = this.$refs.fzrqDate.dateValue;
      this.save.visible = true
      if(fzrq == ''){
        this.$alert({
          type: 'warning',
          message: "预约日期不能为空！"
        });
        return;
      }
      let _data = {
        yyid : this.id,
        ymd: fzrq,
        sd: this.$refs._select.selectedIndex == 0? 'AM': 'PM'
      }
      $.post('/dafwgl/txsq/yysj', _data).then((res) => {
        const data = res.returnData;
        if (parseInt(data.executeResult, 10) === 1) {
          this.$alert({
            type: 'success',
            message: data.message
          });
          this.$router.go(0)
        } else {
          this.$alert({
            type: 'warning',
            message: data.message
          });
          this.$refs.fzrqDate.dateValue= '';
          this.save.visible = false;
        }
      }).catch(() => {});
    },
    // 点击×返回到首页
    iconCloseClick() {
      this.$refs.fzrqDate.dateValue= '';
    },
    // ----
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.GET_reverseList();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.search {
  font-size: $font-size-base;
  .item-wrap{
    height: 100%;
  }
  .no-text {
    width: 984px;
    height: 300px;
    margin: 84px auto 0;
    border: $border;
    background: #fff;
    text-align: center;
    line-height: 300px;
  }
  .title {
    font-size: 45px;
    color: #fff;
    box-sizing: border-box;
    height: 8%;
    padding: $padding-base;
    background-color: #2e7ef7;
  }
  .item {
    border: $border;
    background-color: #fff;
    margin-bottom: $margin-base;
    .item-title-wrap {
      border-bottom: $border;
      padding: $padding-base;
      color: $color-text-label;
      overflow: hidden;
    }
    .margin-l{
      float: left;
      padding-left: 35px;
    }
    .item-title-text{
      float: left;
    }
  }
  /* 箭头 */
  .arrow::before {
    content: "";
    width: 30px;
    height: 30px;
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    transform: rotate(-45deg);
    float: left;
    margin: 50px 0 0 50px;
  }
  .mess-detail{
    .form-group{
      ._select{
        direction: rtl;
      }
    }
  }

.text-btn, .text-btn-look{
  color: $color-base;
  float: right;
  margin-left: 40px;
}
.text-btn{
  margin-left: 50px;
}
.col-3{
  width: 35%;
}

}
</style>
